import 'dart:math';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('网格列表组件'),
          ),
          body:
              // CountGridView()
              FixGridView()
          // CountGridView2(),
          ),
    );
  }
}

// 指定横向数量：使用代理
class CountGridView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 包裹Padding可以给上下左右添加间距
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 20),
      child: GridView(
        // 指定网格数量代理,简化写法是GridView.count
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          // 指定交叉轴子元素总数量
          crossAxisCount: 3,
          // 指定总元素宽高比，由于宽度确定了，用来计算高度
          childAspectRatio: 4 / 3,
          // 交叉轴间距
          crossAxisSpacing: 8,
          // 主轴间距
          mainAxisSpacing: 8,
        ),
        children: List.generate(100, (index) {
          return Container(
            // 随机颜色背景
            color: Color.fromARGB(255, Random().nextInt(256),
                Random().nextInt(256), Random().nextInt(256)),
          );
        }),
      ),
    );
  }
}

// 指定横向数量,使用GridView.count
class CountGridView2 extends StatelessWidget {
  List<Widget> _getChild() {
    List<Widget> childList = List<Widget>();
    for (int i = 0; i < 20; i++) {
      childList.add(Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
            border: Border.all(
          color: Color.fromRGBO(233, 233, 233, 0.9),
          width: 2,
        )),
        child: Text(
          "数据：$i",
          style: TextStyle(color: Colors.pink, fontSize: 24),
        ),
      ));
    }
    return childList;
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      // 改变滚动方向为横向，默认为纵向滚动
      scrollDirection: Axis.horizontal,
      // 指定行数或者列表，根据滚动方向不同
      crossAxisCount: 2,
      // 当为垂直滚动时，纵轴为主轴，这个间距为上下间距
      // 当横向滚动事，横轴为主轴，这个间距为左右间距
      mainAxisSpacing: 12,
      crossAxisSpacing: 4,
      children: this._getChild(),
    );
  }
}

// 不指定网格数量，而是平均分配
class FixGridView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 简化写法GridView.extent
    // gridDelegate 交叉轴放置子元素排布方式，固定个数或者固定宽度
    return GridView(
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 100.0, // 单个元素在水平方向的最大长度，大概值
      ),
      children: [
        Icon(Icons.add),
        Icon(Icons.person),
        Icon(Icons.clear),
        Icon(Icons.refresh),
        Icon(Icons.face),
        Icon(Icons.g_translate),
        Icon(Icons.arrow_forward),
        Icon(Icons.ac_unit),
      ],
    );
  }
}
